<template>
  <div class="app-container">
    <el-form :model="info" :label-position="labelPosition" label-width="10%" width="78%">
      <el-form-item label="编码">
        <el-input v-model="info.code" />
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="info.code" />
      </el-form-item>
      <el-form-item label="图片">
        <el-upload :action="uploadUrl" :limit="1" list-type="picture">
          <el-button type="primary">上传图片</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="价格">
        <el-input v-model="info.code" />
      </el-form-item>
      <el-form-item label="上下架">
        <el-radio-group v-model="info.status">
          <el-radio label="1">上架</el-radio>
          <el-radio label="0">下架</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button @click="$emit('cancel')">取消</el-button>
        <el-button type="primary" @click="fireConfirm">确认</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
const baseUrl = process.env.VUE_APP_BASE_API
export default {
  name: 'CommodityInfo',
  props: {
    commodity: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      info: {
        code: this.commodity.code,
        status: this.commodity.status

      },
      isUpdate: false,
      uploadUrl: baseUrl + '/resource/upload',
      labelPosition: 'right'

    }
  },
  watch: {
    commodity: {
      deep: true,
      handler: function(last, prev) {
        this.info = last
      }
    }

  },
  created() {
  },
  mounted() {
  },
  methods: {
    fireConfirm: function() {
      this.$emit('confirm', this.info)
    }

  }

}
</script>

<style scoped>
</style>
